<template>
  <div>
    <el-container>
      <el-aside width="20%" class="scroll">
        <h1>浙江车检检汽车服务有限公司</h1>

        <el-avatar :size="100"> </el-avatar>

        <span>
          欢迎您,{{ currentUser.username }}
          <el-tooltip
            class="item"
            effect="dark"
            content="点击退出"
            placement="top"
          >
            <i class="el-icon-switch-button" @click="logout"></i>
          </el-tooltip>
        </span>

        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-submenu :index="item.path" v-for="item in menus" :key="item.path">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="subItem.path"
              v-for="subItem in item.children"
              :key="subItem.path"
            >
              <i :class="subItem.icon"></i>
              <span> {{ subItem.name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view v-if="isShow"></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  provide: function () {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      menus: [],
      isShow: true,
    };
  },
  methods: {
    ...mapMutations(["clearcurrentUser"]),
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    // 推出逻辑
    logout() {
      localStorage.removeItem("initCurrenUser");
      this.clearcurrentUser();
      this.$router.replace("/login");
    },
    reload: function () {
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
  },
  computed: {
    ...mapState(["currentUser"]),
  },
  mounted: async function () {
    // this.$http.defaults.headers.token = this.currentUser.token;
    let res = await this.$http.post("/sysUser/getUserMenus", this.currentUser);
    // console.log(res.data.object);
    this.menus = res.data.object;
  },
};
</script>

<style lang="scss" scoped>
div {
  height: 100%;
  background: #f6fafd;
  .el-container {
    height: 100%;
    background: #f6fafd;
    overflow-x: hidden;
    .el-aside {
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h1 {
        color: #333;
        font-size: 20px;
        font-weight: 500;
        margin-top: 30px;
        text-align: center;
      }

      .el-avatar {
        margin: 30px 0 20px;
        flex-shrink: 0;
        background: url("../assets/thumb-71560.jpg") no-repeat;
        background-size: 100px 100px;
      }

      .el-menu {
        width: 100%;
        margin-top: 20px;
        border: none;
      }
    }
  }
}
</style>
